<template>
	<!--添加收货地址-->
	<view class="address-add-containter">
		<view class="add-container">
			<view class="panel">
				<view class="row_name">
					<view class="left_txt">姓名</view>
					<input class="left_input" @input="checkName" placeholder="收货人姓名" maxlength="20"
						:value="addressInfo.receiverName" />
				</view>
				<view class="line"></view>
				<view class="row_name">
					<view class="left_txt">电话</view>
					<input class="left_input" @input="checkPhone" placeholder="收货人手机号" maxlength="11"
						:value="addressInfo.receiverTel" />
				</view>
				<view class="line"></view>
				<view class="row_name">
					<view class="left_txt">地区</view>
					<input class="left_input" @tap="onSelect" placeholder="选择省/市/区" disabled
						:value="addressInfo.receiverProvince ? addressInfo.receiverProvince + '/' + addressInfo.receiverCity + '/' + addressInfo.receiverArea : ''" />
				</view>
				<view class="line"></view>
				<view class="row_name">
					<view class="left_txt">详细地址</view>
					<input class="left_input" @input="checkAddress" placeholder="街道门牌、楼层房间号等信息"
						:value="addressInfo.receiverAddress" />
				</view>
				<view class="line"></view>
				<view class="row_name">
					<view class="left_txt">设置默认地址</view>
					<view class="right_input">
						<switch :disabled="addressInfoConfirm.defaultType === 1" style="transform:scale(0.7)"
							:checked="addressInfo.defaultType === 1" @change="switch2Change" />
					</view>
				</view>

			</view>
			<view v-if="!showSelect" class="button_top btn" @tap="onWechatSync">从微信收货地址同步</view>
			<view v-if="!showSelect" class="button_2 btn" @tap="onSave">保存并使用</view>
			<view v-if="!showSelect" class="button_3 btn del" @tap="onDel">删除收货地址</view>
		</view>
		<view class="popup-bg" v-if="showSelect">
			<view class="picker_container">
				<picker-view :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in provice" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in city" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in area" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
				<view class="picker_top">
					<view @tap="pickerCancel" class="picker_cancel">取消</view>
					<view @tap="pickerOk" class="picker_ok">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deleteAddress,
		getAllAddress,
		updateAddress
	} from '../../api/address.js';
	import {
		getLocLev
	} from '../../api/city.js';
	import {
		navigateBack,
		showModal,
		showToast
	} from '../../utils/promise.js';
	export default {
		data() {
			return {
				addressInfo: {},
				addressInfoConfirm: {},
				curArr: [], //当前数组
				type: 0, //当前应该显示哪种面板 0-添加地址 1-区域选择
				curFlag: 1, //当前操作的类型 Province: 1,//省 2//市 3//区
				actionLock: false,
				provice: [],
				city: [],
				area: [],
				value: [0, 0, 0],
				showSelect: false
			}
		},
		mounted() {},
		onLoad() {

		},
		methods: {
			switch2Change: function(e) {
				if (e.detail.value) {
					this.addressInfo.defaultType = 1;
				} else {
					this.addressInfo.defaultType = 0;
				}
			},
			onWechatSync() {
				uni.chooseAddress({
					success: (res) => {
						this.addressInfo.receiverName = res.userName;
						this.addressInfo.receiverTel = res.telNumber.substring(0, 11);
						this.addressInfo.receiverProvince = res.provinceName;
						this.addressInfo.receiverCity = res.cityName;
						this.addressInfo.receiverArea = res.countyName;
						this.addressInfo.receiverAddress = res.detailInfo;
					},
					fail: (err) => {
						uni.showToast({
							title: '获取微信地址失败',
							icon: 'none'
						});
					}
				});
			},
			pickerCancel() {
				this.showSelect = false;
			},
			pickerOk() {
				this.addressInfo.receiverProvince = this.addressInfoConfirm.receiverProvince;
				this.addressInfo.receiverCity = this.addressInfoConfirm.receiverCity;
				this.addressInfo.receiverArea = this.addressInfoConfirm.receiverArea;
				this.showSelect = false;
			},
			onLoad(params) {
				if (params.receiverId) {
					this.addressQuery(params.receiverId);
				} else {
					this.initAddressInfo();
				}
			},
			addressQuery(receiverId) {
				getAllAddress().then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						let temp = data.find((e) => e.receiverId === Number(receiverId));
						this.addressInfo = temp;
						this.addressInfoConfirm = JSON.parse(JSON.stringify(temp));
					}
				})
			},
			onShow() {},
			//校验数据是否有效
			checkData(data) {
				let msg = '';
				if (data.receiverAddress === '') {
					msg = '请输入正确的详细地址'
				}
				if (data.receiverProvince === '' || data.receiverCity === '' || data.receiverArea === '') {
					msg = '请选择正确的地区'
				}
				if (!/^1[23456789]\d{9}$/.test(data.receiverTel)) {
					msg = '请输入正确的收货人手机号'
				}
				if (data.receiverName === '') {
					msg = '请输入正确的收货人姓名'
				}
				return msg;
			},
			//保存收货地址
			onSave() {
				let addressInfo = this.addressInfo;
				let msg = this.checkData(addressInfo);
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					return
				}
				if (this.actionLock) {
					return
				}
				this.actionLock = true;
				if (addressInfo.receiverId !== undefined) {
					addressInfo.defaultType = 1;
				}
				updateAddress(addressInfo).then((res) => {
					// console.log(res)
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						showToast({
							title: "添加成功",
							icon: "none"
						}).then(() => {
							navigateBack()
						})
					} else {
						showToast({
							title: msg
						})
					}
				}).catch((err) => {
					console.log(err)
					showToast({
						title: "添加失败, 请重试"
					})
				})
				this.actionLock = false;
			},
			//删除收货地址
			onDel() {
				if (this.actionLock) {
					return false
				}
				let params = {
					receiverId: this.addressInfo.receiverId
				}
				deleteAddress(params).then((res) => {
					// console.log(res)
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						showToast({
							title: "删除成功"
						}).then(() => {
							navigateBack()
						})
						return
					}
					showToast({
						title: "删除失败, 请重试"
					})
				}).catch((err) => {
					console.log(err)
					showToast({
						title: "删除失败, 请重试"
					})
				})
			},
			//校验手机号是否满足格式
			checkPhone(e) {
				let val = e.detail.value;
				let char = val.charAt(val.length - 1);
				val = val.substr(0, val.length - 1);
				let reg = new RegExp('^[0-9]*$', 'g');
				this.addressInfo.receiverTel = val + (reg.test(char) ? char : '');
				return this.addressInfo.receiverTel;
			},
			//获取玩家的数据信息
			checkName(e) {
				this.addressInfo.receiverName = e.detail.value;
			},
			//获取玩家的数据信息
			checkAddress(e) {
				this.addressInfo.receiverAddress = e.detail.value;
			},
			//选择省市区
			onSelect() {
				this.clearAddress();
				getLocLev({
					level: 1
				}).then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						this.provice = data;
						this.showSelect = true;
						this.getCity(data[0].code);
						let value = this.value;
						value[0] = 0;
						this.value = value;
						this.addressInfoConfirm.receiverProvince = data[0].name;
					}
				})
			},
			getCity(code) {
				getLocLev({
					level: 2,
					preCode: code
				}).then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						this.city = data;
						let value = this.value;
						value[1] = 0;
						this.getArea(data[0].code);
						this.addressInfoConfirm.receiverCity = data[0].name;
						this.value = value;
					}
				})
			},
			getArea(code) {
				getLocLev({
					level: 3,
					preCode: code
				}).then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						this.area = data;
						let value = this.value;
						value[2] = 0;
						this.value = value;
						this.addressInfoConfirm.receiverArea = data[0].name;
					}
				})
			},
			bindChange: function(e) {
				const val = e.detail.value;
				if (val[0] !== this.value[0]) {
					this.addressInfoConfirm.receiverProvince = this.provice[val[0]].name;
					this.addressInfoConfirm.receiverCity = '';
					this.addressInfoConfirm.receiverArea = '';
					this.getCity(this.provice[val[0]].code);
				}
				if (val[1] !== this.value[1]) {
					this.addressInfoConfirm.receiverCity = this.city[val[1]].name;
					this.getArea(this.city[val[1]].code);
					this.addressInfoConfirm.receiverArea = '';
				}
				if (val[2] !== this.value[2]) {
					this.addressInfoConfirm.receiverArea = this.area[val[2]].name;
				}
				this.value = e.detail.value;
			},
			//清理已经选中的省市县
			clearAddress() {
				this.addressInfoConfirm.receiverProvince = ''; //省
				this.addressInfoConfirm.receiverCity = ''; //市
				this.addressInfoConfirm.receiverArea = ''; //区
			},
			/**
			 * 本地初始化收货地址信息
			 */
			initAddressInfo() {
				this.addressInfo = {
					//  userId: userInfo.userId, //用户id
					receiverName: '', //姓名
					receiverTel: '', //手机号
					receiverProvince: '', //省
					receiverCity: '', //市
					receiverArea: '', //县
					receiverAddress: '', //详细地址
					defaultType: 0, //是否默认地址:0否,1是
					type: 0 //0-新增、修改收货地址
				};
			}
		}
	}
</script>

<style scoped>
	.address-add-containter {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.add-container {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		margin-top: 30rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.panel {
		background: #fff;
		height: 440rpx;
		width: 100%;
		margin-bottom: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.left_txt {
		text-align: left;
		width: 30%;
		margin-left: 7%;
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 36rpx;
	}

	.left_input {
		width: 90%;
		font-size: 26rpx;
	}

	.row_name {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		height:  120rpx;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		border-radius: 8rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-bottom: 24rpx;
	}
	
	.button_top {
		background: #0F4C97;
	}

	.button_2 {
		background: #4064D1;
	}

	.button_3 {
		background: #F56C6C;
		margin-bottom: 0;
	}

	.del {
		margin-top: 0;
	}

	.line {
		margin-top: 10rpx;
		width: 90%;
		height: 2rpx;
		background: rgba(245, 245, 245, 1);
	}

	.select-list-content {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.txt {
		height: 84rpx;
		font-size: 42rpx;
		border-bottom: 2rpx solid rgba(229, 229, 229, 1);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-left: 50rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 300rpx;
		margin-top: 20rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.picker_container {
		text-align: center;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding-bottom: 60rpx;
		padding-top: 20rpx;
	}

	.picker_top {
		display: flex;
		justify-content: center;
		padding: 0 20rpx;
		margin-top: 50rpx;
	}

	.picker_cancel {
		color: #00b26a;
		background-color: #eee;
		width: 150rpx;
		text-align: center;
		border-radius: 10rpx;
		padding: 15rpx;
	}

	.picker_ok {
		color: #fff;
		background-color: #00b26a;
		width: 150rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-left: 40rpx;
		padding: 15rpx;
	}

	.popup-bg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		background-color: rgba(1, 1, 1, 0.3);
	}

	.right_input {
		width: 90%;
	}
</style>